import { FlutterAuthenticatorExample } from '@/components/FlutterAuthenticatorExample';

## Sign Up Fields

The following example customizes the Sign Up screen by:

- Re-using the default Sign Up form fields
- Adding a "Website" field with custom validation
- Add a custom "Bio" field

```dart{4-29}
@override
Widget build(BuildContext context) {
  return Authenticator(
    signUpForm: SignUpForm.custom(
      fields: [
        SignUpFormField.username(),
        SignUpFormField.email(required: true),
        SignUpFormField.custom(
          required: true,
          validator: ((value) {
            if (value == null || value.isEmpty) {
              return 'You must provide a website';
            }
            if (!value.contains('example.com')) {
              return 'Your website must have a domain of example.com';
            }
            return null;
          }),
          title: 'Website',
          attributeKey: CognitoUserAttributeKey.website,
        ),
        SignUpFormField.custom(
          title: 'Bio',
          attributeKey: const CognitoUserAttributeKey.custom('bio'),
        ),
        SignUpFormField.password(),
        SignUpFormField.passwordConfirmation(),
      ],
    ),
    child: MaterialApp(
      builder: Authenticator.builder(),
      home: const Scaffold(
        body: Center(
          child: Text('You are logged in!'),
        ),
      ),
    ),
  );
}
```

<FlutterAuthenticatorExample
  id="flutter-authenticator-sign-up-fields-custom"
  initialStep="signUp"
  signUpAttributes={[
    'username',
    'email-required',
    'website',
    'bio',
    'password',
    'password_confirmation',
  ]}
/>